<!-- 首页 -->
<template>
  <div class="swiperBox" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- 头部 -->
    <div class="header" :style="{transform:isShow?'translate3d(0, -0px, 0)':'translate3d(0, -110px, 0)'}">
      <div class="headerBox">
        <div @click=" add('')"><img src="@/assets/images/1481892407.png" width="100"></div>
        <div>
          <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="" text-color="#fff" active-text-color="#00dfb9">
            <template v-for="item in navMenuList">
              <div :key="item.id" v-if="item.status!='0'" style="display:inline-block">
                <el-submenu :index="item.name" v-if="item.subCategoryBOList && item.subCategoryBOList.length">
                  <template slot="title">{{item.name}}</template>
                  <el-menu-item v-for="i in item.subCategoryBOList" :key="i.id" :index="i.name" @click="add(i.id)">{{i.name}}</el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index="item.name" @click="add(item.id)" :key="item.id">{{item.name}}</el-menu-item>
              </div>
            </template>
          </el-menu>
        </div>
        <div>
          <span v-if="!userInfo.token" @click="$router.push('/login')">
            <img src="@/assets/images/user.png" width="22" height="22" alt="" style="vertical-align: middle;margin-right: 3px;">
            <span>{{$t('lan.login')}}</span>
          </span>
          <span v-else>
            <el-popover placement="bottom" v-model="showView" width="380" trigger="click">
              <div class="flexBox" v-for="i in cartList" :key="i.id">
                <div class="flexLeft">
                  <img v-if="i.picUrl" :src="i.picUrl" width="80" height="80" alt="">
                  <img v-else src="@/assets/images/1481161992.jpg" width="80" height="80" alt="">
                </div>
                <div class="flexRight">
                  <p style="font-size:18px;color:#2c2c2c">{{i.categoryName}}</p>
                  <p><span>{{$t('lan.doorColor')}}：{{i.colorValue?i.colorValue:''}}<span :class="i.deviceColor!='11'?'colorValue':''" :style="{background:i.colorValue?'':formatColor(i.deviceColor)}"></span></span> <span>{{$t('lan.cabinetColor')}}：{{i.cabinetColorValue?i.cabinetColorValue:''}}<span :class="i.cabinetColor!='11'?'colorValue':''" :style="{background:i.cabinetColorValue?'':formatColor(i.cabinetColor)}"></span></span></p>
                  <p><span>{{$t('lan.auxiliaryNum')}}：<span style="color:#2c2c2c">{{i.subCategoryTotalCount}}</span></span> </p>
                  <p><span>{{$t('lan.totalNumDoors')}}：<span style="color:#2c2c2c">{{i.doorTotalCount}}</span></span></p>
                  <p><span>{{$t('lan.system')}}：</span> <span style="color:#2c2c2c">{{i.operationCode}} {{i.serverFlag === '1'?$t('lan.serverRequired'):$t('lan.noServerRequired')}}</span></p>
                </div>
              </div>
              <el-button class="invoicing" type="primary" v-if="cartList.length" @click="toPath('/shoppingCart')">{{$t('lan.check')}}</el-button>
              <div class="navMenu">
                <p @click="toPath('/orderList')">{{$t('lan.order')}}</p>
                <p @click="logout">{{$t('lan.logout')}}</p>
              </div>
              <p slot="reference" style="position: relative;display: inline-block;">
                <img src="@/assets/images/portrait.png" width="30" height="30" style="vertical-align:middle;" alt="">
                <span class="tag" v-if="this.cartLength>0">{{cartLength}}</span>
              </p>
            </el-popover>
            <span>{{userInfo.mobile}}</span>
          </span>
        </div>
      </div>
    </div>

    <!-- 轮播 -->
    <swiper class="content" :options="swiperOption" ref="mySwiper">
      <!-- 头部banner -->
      <swiper-slide v-if="bannerList.length">
        <el-carousel height="100vh" @change="changeSwiper">
          <el-carousel-item v-for="(item,index) in bannerList" :key="item.id">
            <div class="divBox" @click="openUrl(item.targetUrl)">
              <img :src="item.url" alt="">
              <div class="textClass">
                <h1 :class="swiperIndex === index?'animated slideInLeft':''">{{item.code}}</h1>
                <p :class="swiperIndex === index?'animated slideInRight':''">{{item.name}}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </swiper-slide>

      <swiper-slide v-for="(item,index) in prouctList" :key="item.id">
        <div class="divBox" @click="gotoPath(item)">
          <img :src="item.picUrl" :style="{height:prouctList.length-1 === index?'calc(100vh - 60px)':'100vh'}" v-if="item.picUrl!=''  && matchFileSuffixType(item.picUrl,'image')" alt="">
          <video class="videoBox" muted="muted" :autoplay="autoplay" :src="item.picUrl" v-if="item.picUrl!='' && matchFileSuffixType(item.picUrl,'video')"></video>
          <div class="textClass" :style="{top:prouctList.length-1 === index?'calc(80% - 60px)':'80%'}">
            <h1 :class="isShow?'opacitySty':'opacityShow'">{{item.title}}</h1>
            <p :class="isShow?'opacitySty1':'opacityShow'">{{item.subTitle}}</p>
            <button class="learn" v-if="item.content" @click="$router.push(`/productDetail?id=${item.id}`)">{{$t('lan.more')}}</button>
            <button v-if="item.buyFlag === '1'" @click.stop="buyNow('/order',item.id)">{{$t('lan.buy')}}</button>
          </div>
          <div class="footer" v-if="articleList.length === 0 && index === prouctList.length-1">Copyright © 2016-2020 {{$t('lan.reserved')}}</div>
        </div>
      </swiper-slide>
      <swiper-slide v-if="articleList && articleList.length">
        <div class="divBox">
          <div class="article textClass">
            <div v-for="item in articleList" :key="item.id">
              <img :src="item.picUrl" class="articleImg" alt="">
              <h1 class="articleTitle">{{item.title}}</h1>
              <p class="articleContent" v-html="item.content"></p>
            </div>
          </div>
          <div class="footer">Copyright © 2016-2020 {{$t('lan.reserved')}}</div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { navMenuList, getBannerList, getProductList, getArticleList, getCatList } from '../api'
import { matchFileSuffixType, colorList } from '../common'
export default {
  name: 'webIndex',
  data () {
    return {
      autoplay: true,
      isShow: true,
      activeIndex2: '',
      swiperIndex: 0,
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 1,
        spaceBetween: 0,
        mousewheel: true,
        autoHeight: true,
        parallax: true,
        height: window.innerHeight,
        speed: 800,
        on: {
          slideChangeTransitionStart: () => {
            this.isShow = false
            setTimeout(() => {
              this.isShow = true
            }, 800)
          },
        }
      },
      loading: false,
      bannerList: [],
      navMenuList: [],
      prouctList: [],
      articleList: [],
      matchFileSuffixType: matchFileSuffixType,
      isLogin: false,
      userInfo: {},
      cartList: [],
      cartLength: null,
      showView: false,
    }
  },
  methods: {
    toPath (path) {
      this.showView = false
      this.$router.push(path)
    },
    formatColor (id) {
      for (let i of colorList) {
        if (id === i.id) return i.value
      }
    },
    // 获取购物车列表
    async fetchCatList () {
      if (this.userInfo.token) {
        const data = await getCatList({ userId: JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')).id : '' })
        this.cartLength = data.datas.length
        localStorage.setItem('cartList', JSON.stringify(data.datas))
        if (data.datas.length) this.cartList = data.datas.slice(0, 2)
      }
    },
    logout () {
      this.$confirm(this.$t('lan.logoutPrompt'), this.$t('lan.prompt'), {
        confirmButtonText: this.$t('lan.confirm'),
        cancelButtonText: this.$t('lan.cancel'),
        type: "warning"
      }).then(async () => {
        localStorage.clear()
        this.$router.push('/login')
        window.location.reload()
      });
    },
    // 立即购买
    buyNow (path, productId) {
      const params = this.$route.query.id
      const id = params ? params : this.navMenuList[0].id
      this.$router.push(`${path}?id=${id}&productId=${productId}`)
    },
    gotoPath (item) {
      if (item.customizeFlag != '1') return
      const params = this.$route.query.id
      const id = params ? params : this.navMenuList[0].id
      this.$router.push(`/customize?id=${id}&productId=${item.id}`)
    },
    changeSwiper (val) {
      this.swiperIndex = val
    },
    add (id) {
      const typeId = id ? id : this.navMenuList[0].id || ''
      this.$router.push(`/?id=${typeId}`)
      window.location.reload()
    },
    // banner跳转
    openUrl (url) {
      if (!url) return
      window.open(url)
    },
    // 获取数据
    async getList (id) {
      try {
        const data = await navMenuList({ pid: 0 })
        this.navMenuList = data // 获取头部菜单
        localStorage.setItem('navMenuList', JSON.stringify(this.navMenuList))
        const typeId = id ? id : this.navMenuList[0].id
        this.prouctList = await getProductList({ type: typeId }) // 获取栏目列表
        this.bannerList = await getBannerList({ type: typeId })  // 获取banner
        this.articleList = await getArticleList({ type: typeId }) // 获取资讯列表
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
  },
  created () {
    this.loading = true
    const params = this.$route.query.id
    this.getList(params)
  },
  async activated () {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
    const data = await navMenuList({ pid: 0 })
    this.navMenuList = data // 获取头部菜单
    localStorage.setItem('navMenuList', JSON.stringify(this.navMenuList))
    this.fetchCatList();
  },
}
</script>
<style scoped>
.opacitySty1 {
  transform: translate3d(0, 0px, 0);
  opacity: 1;
  transition: all 2.3s ease;
}
.opacityShow {
  transform: translate3d(0, 140px, 0);
  transition: all 0.5s ease;
  opacity: 0;
}
.opacitySty {
  transform: translate3d(0, 0px, 0);
  opacity: 1;
  transition: all 1.5s ease;
}
.tag {
  position: absolute;
  right: -10px;
  top: -6px;
  font-size: 12px !important;
  margin-right: 0px !important;
  background: #f53434;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  line-height: 20px;
}
.navMenu {
  padding: 20px 0px;
}
.navMenu p {
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  margin-left: 15px;
  color: #409eff;
  cursor: pointer;
}
.invoicing {
  width: 60%;
  margin-top: 20px;
  margin-left: 20%;
  background-color: #ee781e;
  border-color: #ee781e;
}
.flexBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.flexLeft {
  flex: 0 0 80px;
  padding-right: 20px;
}
.flexRight {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.flexRight p {
  line-height: 24px;
  font-size: 14px;
  color: #7b7b7b;
}
.divBox {
  position: relative;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
}
.videoBox {
  width: 100%;
  background-position: center;
  background-size: cover;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 1);
  height: 80px;
  z-index: 9;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.headerBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 1200px;
  margin: 0 auto; */
  height: 80px;
}
.headerBox div:nth-of-type(1) {
  flex: 0 0 100px;
  color: #fff;
  text-align: center;
}
.headerBox div:nth-of-type(1) img {
  position: relative;
  top: 0px;
  cursor: pointer;
}
.headerBox div:nth-of-type(2) {
  flex: 1;
  color: #fff;
  text-align: center;
}
.headerBox div:nth-of-type(3) {
  flex: 0 0 230px;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  cursor: pointer;
}
.headerBox div:nth-of-type(3) span {
  font-size: 16px;
  margin-right: 10px;
}
.swiper-pagination {
  cursor: pointer;
}
.swiper-slide {
  cursor: pointer;
}
.content img {
  width: 100%;
  height: 100vh;
}
.textClass {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  height: 100%;
  width: 100%;
  margin: -3% 0 0 -50%;
}
.textClass h1 {
  color: #fff;
  text-shadow: 20px 10px 50px #f2f5f8;
  font-size: 32px;
}
.textClass p {
  font-size: 60px;
  color: #fff;
  text-shadow: 20px 10px 50px #f2f5f8;
}
.textClass button {
  border: none;
  background: #ee781e;
  color: #fff;
  width: 243px;
  height: 40px;
  line-height: 40px;
  border-radius: 30px;
  font-size: 16px;
  margin: 0px 30px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: 0.1s;
  box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.1);
}
.footer {
  height: auto;
  padding: 15px 0px;
  line-height: 30px;
  background: #000;
  color: #eee;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 14px;
  text-align: center;
  border: none !important;
}
.swiperBox {
  height: 100vh;
}
.swiperBox >>> .el-menu {
  background: transparent;
}
.swiperBox >>> .el-menu-item {
  min-width: 120px;
  font-size: 14px;
}
.swiperBox >>> .el-menu-item:hover {
  background: transparent;
  color: #ee781e !important;
}
.swiperBox >>> .el-submenu__icon-arrow {
  display: none;
}
.swiperBox >>> .el-menu--horizontal > .el-menu-item.is-active {
  color: #00dfb9 !important;
  border-bottom-color: transparent !important;
}
.swiperBox >>> .el-menu--horizontal > .el-menu-item,
.swiperBox >>> .el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 90px;
  line-height: 90px;
}
.swiperBox >>> .el-menu--horizontal > .el-submenu .el-submenu__title {
  font-size: 26px;
}
.swiperBox >>> .el-menu--horizontal .el-menu .el-menu-item {
  color: #555;
}
.swiperBox >>> .el-submenu.is-active .el-submenu__title {
  border-bottom-color: transparent !important;
}
.swiperBox >>> .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  color: #ee781e !important;
}

.swiperBox >>> .el-carousel__indicator.is-active button {
  background: #ee781e;
  color: #000;
}
.swiperBox >>> .el-carousel__arrow {
  background: #ee781e;
  width: 45px;
  height: 45px;
}
.swiperBox >>> .el-carousel__arrow i {
  font-size: 24px;
}

.article {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  width: 80%;
}
.article div {
  width: 350px;
  height: 300px;
  border-radius: 10px;
  background: #fff;
  margin: 10px;
  box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.1);
}
.articleTitle {
  color: #555 !important;
  text-align: left;
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.articleContent {
  font-size: 16px !important;
  height: 80px;
  line-height: 26px;
  color: #555 !important;
  text-align: justify;
  margin: 5px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.articleImg {
  width: 100%;
  height: 160px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.learn {
  /* position: absolute; */
  /* bottom: 80px; */
  border: none;
  background: #3a8ee6 !important;
  color: #fff;
  margin-right: 50px;
  /* padding: 10px 60px; */
  border-radius: 30px;
  font-size: 16px;
  margin-top: 20px;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: 0.1s;
  box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.1);
}
.customize {
  background: #3a8ee6 !important;
  color: #fff;
  margin-left: 20px;
}
</style>